import React, { useMemo } from 'react';
import { marked } from 'marked';

interface MarkdownPreviewProps {
  content: string;
  className?: string;
}

export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
  content,
  className = '',
}) => {
  const htmlContent = useMemo(() => {
    try {
      return marked.parse(content, {
        breaks: true,
        gfm: true,
      });
    } catch (error) {
      console.error('Markdown parsing error:', error);
      return '<p class="text-red-500">Markdown 解析错误</p>';
    }
  }, [content]);

  return (
    <div className={`overflow-auto h-full bg-white dark:bg-gray-900 ${className}`}>
      <div
        className="markdown-body prose prose-lg max-w-none p-6"
        dangerouslySetInnerHTML={{ __html: htmlContent as string }}
      />
    </div>
  );
};

export default MarkdownPreview;
